{% extends './template/indexOption.html' %}

{% block indexOption %}

<link rel="icon" href="/images/上方小图标/位图/上方小图标.png">

<!-- 引入博客内容宏 -->
{% import './macros/BlogList.html' as list %}

<title>俱往矣i 的个人空间</title>
<link rel="stylesheet" href="/css/view/profile.css">

<body>

  <!-- 消息的按钮 -->
  <a href="/newNews">
    <div class="newNews">
      <div class="number">
        <p class="p1"></p>
        <p class="p2">4245</p>
        <p class="p3"></p>
      </div>
      <img src="/images/BlogProfile/矢量图/消息.svg" alt="">
      <span class="newNewList">新消息</span>
    </div>
  </a>

  <!-- 上方资料卡 -->
  <div class="data-box">
    <!-- 更换背景图的按钮 -->
    <div class="replaceCover">
      <img src="/images/profile/矢量图/彩虹.svg" alt="">
      <span>更换封面背景</span>
    </div>
    <div class="img-box">
      <img class="userImg" src="/images/public/位图/我的头像.jpg" alt="">
    </div>
    <p class="nickname">
      俱往矣i
      <img class="Gender" src="/images/profile/矢量图/男.svg" alt="">
    </p>
    <p class="autograph">这里是我的个性签名。这里是我的个性签名。</p>
    <div class="btn-box">
      <button class="follow">关注 TA</button>
    </div>
  </div>

  <!-- 更换背景的模态框 -->
  <div class="replaceCover-img">
    <h3>选择一个封面背景</h3>
    <img class="closeSvg" src="/images/profile/矢量图/关闭.svg" alt="">
    <div>
      <img class="img" src="/images/profile/位图/资料卡背景 (1).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (2).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (3).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (4).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (5).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (6).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (7).jpg" alt="">
      <img class="img" src="/images/profile/位图/资料卡背景 (8).jpg" alt="">
    </div>
  </div>

  <!-- 资料卡下的导航 -->
  <div class="Navigation">
    <p>
      <span class="choice mySpace" style="color: #ff8140;">我的空间</span>
      <span class="choice picture">我的相册</span>
    </p>
  </div>

  <!-- 下方 -->
  <div class="bottom">

    <!-- 左边显示粉丝和关注框 -->
    <div class="bigLeft-box">


      <!-- 左边盒子 博客 -->
      <div class="left-blog">
        <div class="data">
          <div class="follow leftOption">
            <span>415239</span>
            <p>粉丝</p>
          </div>
          <div class="fans leftOption">
            <span>4224</span>
            <p>关注</p>
          </div>
          <div class="blog leftOption">
            <span>25632</span>
            <p>微博</p>
          </div>
        </div>

        <div>
          <!-- 我的粉丝 -->
          <div class="mydata">
            <h3>我的粉丝</h3>
            <hr>
            <!-- 模拟数据 -->
            <div class="mydataBox">
              <div class="mydataBoxA">
                <img class="userImg" src="/images/simulation/位图/模拟头像.jpg" alt="">
              </div>
              <div class="mydataBoxB">
                <a href="#">
                  <span class="NickName">我是小明仔</span><br>
                </a>
                <span class="address">地址：河北-秦皇岛</span>
              </div>
              <button class="mydataBoxButton">+关注</button>
            </div>

          </div>

          <!-- 我的关注-->
          <div class="mydata">
            <h3>我的关注</h3>
            <hr>
            <div class="mydataBox">
              <div class="mydataBoxA">
                <img class="userImg" src="/images/simulation/位图/模拟头像.jpg" alt="">
              </div>
              <div class="mydataBoxB">
                <a href="#">
                  <span class="NickName">我是小明仔</span><br>
                </a>
                <span class="address">地址：河北-秦皇岛</span>
              </div>
              <button class="mydataBoxButton">+关注</button>
            </div>
          </div>

          <!-- 我的资料 -->
          <div class="mydata" style="display: block;">
            <h3>我的资料</h3>
            <br>
            <p>性别：</p><span>男</span>
            <br><br>
            <p>城市：</p><span>河北-秦皇岛</span>
            <br><br>
            <p>感情状况：</p><span>单身</span>
            <br><br>
            <p>血型：</p><span>O型</span>
            <br><br>
            <p>个性签名：</p>
            <div class="qianming">这里是我的个性签名。这里是我的个性签名。</div>
            <br><br>
            <p>邮箱：</p><span>保密</span>
            <br><br>
            <p>QQ：</p><span>保密</span>
            <br>
            <a class="Gosetting" style="line-height: 40px;" href="/setting">编辑我的个人信息>></a>
          </div>
        </div>

      </div>

    </div>

    <!-- 右边盒子  选项卡 -->
    <div class="right-blog">

      <!-- 右边盒子  博客 -->
      <div class="blog-data" style="display: block;">

        {{ list.BlogList() }}
        {{ list.BlogList() }}
        {{ list.BlogList() }}
        {{ list.BlogList() }}
        {{ list.BlogList() }}

      </div>

      <!-- 右边盒子  相册 -->
      <div class="blog-data" style="display: none;">
        <div class="picture-box">
          <h2>我的相册</h2>
          <div class="blogImg-Imgbox">
            <img src="/images/simulation/位图/模拟用图 (1).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (2).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (3).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (4).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (5).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (6).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (7).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (8).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (9).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (1).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (2).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (3).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (4).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (5).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (6).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (7).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (8).jpg" alt="">
            <img src="/images/simulation/位图/模拟用图 (9).jpg" alt="">
          </div>

          <!-- 没有更多了 -->
          <div class="noMore">
            <img class="noMoreSvg" src="/images/profile/矢量图/没有更多.svg" alt="">
            <p>没有更多了...</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 更换头像的模态框 -->
  <div class="backgroundReplaceBox">
    <div class="replaceBox">
      <div class="top">
        <h3>更换头像</h3>
      </div>
      <div class="middle">
        <div class="middle-left">
          <!-- 头像 -->
          <div>
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
        </div>
        <!-- 预览框 大中小 -->
        <div class="middle-right">
          <p class="preview">预览</p>
          <p class="textBig">大</p>
          <div class="previewBig">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
          <p class="textMiddle">中</p>
          <div class="previewMiddle">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
          <p class="textSmall">小</p>
          <div class="previewSmall">
            <img class="headPortrait" src="/images/public/位图/我的头像.jpg" alt="">
          </div>
        </div>
      </div>
      <input class="file" type="file" hidden>
      <div class="fileButton">选择文件</div>
      <div class="bottomBox">
        <div>
          <button class="preservation">保存</button>
        </div>
        <div>
          <button class="cancel">取消</button>
        </div>
      </div>
    </div>
  </div>

  <script src="/js/myJS/My_JS.js"></script>

  <script>
    // 左边选项卡 切换 粉丝 关注 微博
    let leftOption = $Al(".leftOption"); // 点击的选项
    let mydata = $Al(".mydata");  // 弹出的框

    for (let i = 0; i < mydata.length; i++) {
      leftOption[i].onclick = function () {
        for (let j = 0; j < mydata.length; j++) {
          mydata[j].style.display = "none";
        }
        mydata[i].style.display = "block";
      }
    }


    // 点击更换背景图模态框弹出
    $(".replaceCover").onclick = function () {
      $(".replaceCover-img").style.right = "0px";
    }

    // 关闭更换背景图模态框
    $(".closeSvg").onclick = function () {
      $(".replaceCover-img").style.right = "-500px";
    }


    // 更换封面背景图
    let UserImages = $Al(".img");
    for (let i = 0; i < UserImages.length; i++) {
      let UImages = UserImages[i];
      UImages.index = i + 1;
      UserImages[i].onclick = function () {
        $(".data-box").setAttribute("style", `background-image: url('/images/profile/位图/资料卡背景 (${UImages.index}).jpg')`);
      }
    }


    // 点击头像 更换头像的模态框显示出来
    $(".userImg").onclick = function () {
      $(".backgroundReplaceBox").style.display = "block";
    };

    // 关闭更换头像的模态框
    $(".cancel").onclick = function () {
      $(".backgroundReplaceBox").style.display = "none";
    };


    let ProfileTimer = null;

    window.onscroll = function () {
      if (ProfileTimer !== null) {
        clearTimeout(ProfileTimer);
      }
      ProfileTimer = setTimeout(() => {

        // 滚轮向下滑动返回顶部按钮就显示
        if (document.body.scrollTop > 0) {
          $(".ReturnTop").style.display = "block";
        }
        else {
          $(".ReturnTop").style.display = "none";
        }

        ProfileTimer = null;
      }, 100)
    }

    window.onscroll = function () {
      // 根据浏览器宽度和高度改变左边盒子的样式
      let winWid = document.documentElement.clientWidth; // 获取到浏览器宽度
      let Top = document.body.scrollTop; // 获取浏览器下滑的高度
      console.log("1")
      // 左边盒子加上id变成固定定位 右边盒子可以照样下滑
      if (Top > 370 && winWid > 920) {
        $(".left-blog").setAttribute("id", "left-blog");
      } else {
        $(".left-blog").setAttribute("id", "");
      }
    }


    // 我的空间和我的相册选项卡切换
    let choice = $Al(".choice");
    let blogData = $Al(".blog-data");

    for (let i = 0; i < blogData.length; i++) {
      choice[i].onclick = function () {
        for (let j = 0; j < blogData.length; j++) {
          blogData[j].style.display = "none";
          choice[j].style.color = "black";
        }
        blogData[i].style.display = "block";
        choice[i].style.color = "#ff8140";
      }
    }


    // 选择文件 预览需要上传的文件
    $('.fileButton').onclick = function () {
      $(".file").click()
      $(".file").onchange = function () {
        // console.log("触发事件")
        const blogImg = window.URL.createObjectURL($(".file").files[0])
        let headPortrait = $Al(".headPortrait"); // 获取到需要改变的预览头像
        for (let i = 0; i < headPortrait.length; i++) {
          headPortrait[i].setAttribute("src", blogImg);
        }
        // 将 value 清空 解决相同文件不触发 onchange 事件问题
        $(".file").value = "";
      }
    }

  </script>
</body>

{% endblock %}